<template>
  <div>
    <!-- 标题 -->
    <p class="title">推荐歌单</p>
    <div>
      <van-row gutter="10">
        <van-col span="8" v-for="obj in recommendList" :key="obj.id"
          ><van-image width="100%" :src="obj.picUrl" />
          <p class="song_name">{{ obj.name }}</p>
        </van-col>
      </van-row>
    </div>

    <!-- 最新音乐 -->
    <van-config-provider :theme-vars="themeVars">
      <!-- 使用封装的组件 -->
      <SongItem
        v-for="obj in hotList"
        :key="obj.id"
        :name="obj.name"
        :author="obj.song.artists[0].name"
        :id="obj.id"
      ></SongItem>
    </van-config-provider>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import SongItem from "@/components/SongItem.vue";
//不用vuex写法
// import { recommendMusicAPI } from "@/api";
// onMounted(async () => {
//   const res = await recommendMusicAPI();
//   console.log(res);
// });
export default {
  name: "Home",
  components: { SongItem },
  setup() {
    const store = useStore();
    // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
    const themeVars = {
      cellFontSize: "17px",
    };
    //数据
    let recommendList = ref({}); //推荐歌单
    let hotList = ref([]); //最新音乐

    //方法
    onMounted(async () => {
      // 获取推荐歌单
      await store.dispatch("home/getpersonData", { limit: 6 });
      recommendList.value = store.state.home.personData;
      //console.log(recommendList);
      // 获取最新音乐
      await store.dispatch("home/gethotListData", { limit: 20 });
      hotList.value = store.state.home.hotListData;
      console.log(hotList);
    });

    return {
      recommendList,
      themeVars,
      hotList,
    };
  },
};
</script>

<style scoped>
/* 标题 */
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
/* 推荐歌单 - 歌名 */
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.266667rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}

.van-icon-play-circle-o:before {
  font-size: 20px;
}
</style>
